import { intersection } from "lodash";
import { useEffect } from "react";
// vue写权限
// 页面权限 -> 路由
// 功能权限 -> 指令，mixins，组件
// react 没有指令，mixins已废弃
const AuthControl = (props) => {
    const permissions = ["view", "delete", "create"]; // 从后台请求过来的
    //    permissions props.permissions 取交集
    const hasPermission = !!intersection(permissions, props.permissions).length;
    if (hasPermission) {
        // 有权限
        return props.children;
    } else {
        // 没有权限
        if (props.isPage) {
            return <div>您需要开通vip才能查看</div>;
        }
        return null;
    }
};
function App() {
    // 小缺陷：前端虽然做了页面权限控制，但是依然发了请求。不过正常后端也会做接口权限控制
    useEffect(() => {
        console.log("我去请求接口了"); // 接口也需要做权限控制
    }, []);
    return (
        <div>
            {/* <AuthControl permissions={["edit"]}>
                <button>我是受编辑权限控制的</button>
            </AuthControl>
            <AuthControl permissions={["create"]}>
                <button>我是受新增权限控制的</button>
            </AuthControl> */}
            <AuthControl permissions={["vip"]} isPage>
                <div>我是VIP页面啊</div>
            </AuthControl>
        </div>
    );
}
export default App;
